<template>
  <div>
    <el-row :gutter="15" style="margin: 40px;">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" style="width: 40%" >
        <el-col :span="24">
          <el-form-item label-width="110px" label="网店分类" prop="type">
            <el-radio-group v-model="formData.type" size="medium">
              <el-radio
                v-for="dict in dict.type.trading_type_options"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="网店旺旺" prop="wangwangNum">
            <el-input v-model="formData.wangwangNum" placeholder="请输入网店旺旺" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="网店链接" prop="link">
            <el-input v-model="formData.link" placeholder="请输入网店链接" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="110px" label="卖家到手价格" prop="handPrice">
            <el-input v-model="formData.handPrice" placeholder="请输入卖家到手价格" clearable
                      :style="{width: '100%'}" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,4})?.*$/,'$1')">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="110px" label="网店出售价格" prop="sellingPrice" >
            <el-input v-model="formData.sellingPrice" placeholder="请输入网店出售价格" clearable
              :style="{width: '100%'}" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,4})?.*$/,'$1')">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="110px" label="历史假冒扣分" prop="counterfeitYear">
            <el-input v-model="formData.counterfeitYear" placeholder="请输入" clearable :style="{width: '100%'}">
              <template slot="append">年</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="1px" label="" prop="counterfeitScore">
            <el-input v-model="formData.counterfeitScore" placeholder="请输入" clearable
              :style="{width: '100%'}">
              <template slot="append">分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="网店信誉等级" prop="reputationLevel">
            <el-select v-model="formData.reputationLevel" placeholder="请选择网店信誉等级" clearable
              :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.trading_reputation_level"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="主营类目" prop="mainCategory">
            <el-select v-model="formData.mainCategory" placeholder="请选择主营类目" clearable
              :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.trading_main_category"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="创店时间" prop="establishmentTime">
            <el-select v-model="formData.establishmentTime" placeholder="请选择创店时间" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in establishmentTimeOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="网店名称" prop="shopName">
            <el-input v-model="formData.shopName" placeholder="请输入网店名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="网店详情" prop="shopDetails">
            <el-input v-model="formData.shopDetails" type="textarea" placeholder="请输入网店详情"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="110px" label="手机号" prop="mobile">
            <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
              prefix-icon='el-icon-mobile-phone' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="QQ号" prop="qqNum">
            <el-input v-model="formData.qqNum" placeholder="请输入QQ号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="110px" label="网店地址" prop="shopAddress">
            <el-select v-model="formData.shopAddress" placeholder="请选择网店地址" clearable
              :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.s_province"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="店铺标签" prop="shopLabel">
            <el-input v-model="formData.shopLabel" placeholder="请输入店铺标签" clearable :style="{width: '100%'}">
              <template slot="append">以【空格】分隔</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="淘信誉" prop="taobaoReputation">
            <el-input v-model="formData.taobaoReputation" placeholder="请输入淘信誉" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="出售人姓名" prop="sellerName">
            <el-input v-model="formData.sellerName" placeholder="请输入出售人姓名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="所在区域" prop="localArea">
            <el-select v-model="formData.localArea" placeholder="请选择所在区域" clearable :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.s_province"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="经营状态" prop="operatingState">
            <el-select v-model="formData.operatingState" placeholder="请选择经营状态" clearable
              :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.trading_operating_state"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="店铺来源" prop="shopSource">
            <el-select v-model="formData.shopSource" placeholder="请选择店铺来源" clearable :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.trading_shop_source"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="好评率" prop="favorableRate">
            <el-input v-model="formData.favorableRate" placeholder="请输入好评率" clearable
              :style="{width: '100%'}">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
<!--
<el-col :span="13">
          <el-form-item label-width="110px" label="店铺类型" prop="shopType">
            <el-select v-model="formData.shopType" placeholder="请选择店铺类型" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in shopTypeOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="是否过户" prop="transferOrNot">
            <el-radio-group v-model="formData.transferOrNot" size="medium">
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="110px" label="是否有差价" prop="priceDifference">
            <el-radio-group v-model="formData.priceDifference" size="medium">
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label-width="110px" label="优惠金额" prop="discountAmount">
            <el-input v-model="formData.discountAmount" placeholder="请输入优惠金额" clearable
              :style="{width: '100%'}">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>-->
        <el-col :span="13">
          <el-form-item label-width="110px" label="网店图片" prop="shopPicture" required>
<!--            <el-upload ref="shopPicture"
                       :file-list="shopPictureFileList"
                       :action="shopPictureAction" multiple
                       :before-upload="shopPictureBeforeUpload"
                       :headers="headers"
                       list-type="picture" accept="image/*">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
            </el-upload>-->
            <ShopImageUpload @input="shopPictureChange" :fileList="formData.shopPicture"></ShopImageUpload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {addTrading} from "@/views/shop/api/trading";
import {getToken} from "@/utils/auth";
import ShopImageUpload from "@/views/shop/components/ShopImageUpload/index.vue";
import ImageUpload from "@/components/ImageUpload/index.vue";

export default {
  dicts: ['sys_yes_no', 'trading_type_options', 'trading_shop_source', 'trading_main_category', 'trading_shop_address',
    'trading_operating_state', 'trading_reputation_level', 's_province'],
  components: {ShopImageUpload, ImageUpload},
  props: [],
  data() {
    function getYearsArray() {
      // 获取当前年份
      const currentYear = new Date().getFullYear();
      // 初始化一个空数组来存储年份对象
      let yearsArray = [];
      // 循环20次，从当前年份向前推20年
      for (let i = 0; i < 20; i++) {
        // 计算年份
        const year = currentYear - i;
        // 创建一个对象，并添加到数组中
        yearsArray.push({
          "label": `${year}年`,
          "value": `${year}年`
        });
      }
      return yearsArray;
    }

    return {
      baseURI: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      formData: {
        type: "2",
        wangwangNum: undefined,
        link: undefined,
        handPrice: undefined,
        sellingPrice: undefined,
        counterfeitYear: undefined,
        counterfeitScore: undefined,
        reputationLevel: undefined,
        mainCategory: undefined,
        establishmentTime: undefined,
        shopName: undefined,
        shopDetails: undefined,
        mobile: '',
        qqNum: undefined,
        shopAddress: undefined,
        shopLabel: undefined,
        taobaoReputation: undefined,
        sellerName: undefined,
        localArea: undefined,
        operatingState: undefined,
        shopSource: undefined,
        favorableRate: undefined,
        shopType: undefined,
        transferOrNot: "N",
        priceDifference: "N",
        discountAmount: undefined,
        shopPicture: [],
      },
      rules: {
        type: [{
          required: true,
          message: '网店分类不能为空',
          trigger: 'change'
        }],
        wangwangNum: [{
          required: true,
          message: '请输入网店旺旺',
          trigger: 'blur'
        }],
        link: [{
          required: true,
          message: '请输入网店链接',
          trigger: 'blur'
        }],
        handPrice: [{
          required: true,
          message: '请输入卖家到手价格',
          trigger: 'blur'
        }],
        sellingPrice: [{
          required: true,
          message: '请输入网店出售价格',
          trigger: 'blur'
        }],
        counterfeitYear: [{
          required: false,
          message: '请输入',
          trigger: 'blur'
        }],
        counterfeitScore: [{
          required: false,
          message: '请输入',
          trigger: 'blur'
        }],
        reputationLevel: [{
          required: true,
          message: '请选择网店信誉等级',
          trigger: 'change'
        }],
        mainCategory: [{
          required: true,
          message: '请选择主营类目',
          trigger: 'change'
        }],
        establishmentTime: [{
          required: true,
          message: '请选择创店时间',
          trigger: 'change'
        }],
        shopName: [{
          required: true,
          message: '请输入网店名称',
          trigger: 'blur'
        }],
        shopDetails: [],
        mobile: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        qqNum: [{
          required: true,
          message: '请输入QQ号',
          trigger: 'blur'
        }],
        shopAddress: [{
          required: true,
          message: '请选择网店地址',
          trigger: 'change'
        }],
        shopLabel: [{
          required: true,
          message: '请输入店铺标签',
          trigger: 'blur'
        }],
        taobaoReputation: [{
          required: true,
          message: '请输入淘信誉',
          trigger: 'blur'
        }],
        sellerName: [],
        localArea: [],
        operatingState: [],
        shopSource: [{
          required: true,
          message: '请选择店铺来源',
          trigger: 'change'
        }],
        favorableRate: [{
          required: true,
          message: '请输入好评率',
          trigger: 'blur'
        }],
        /*shopType: [{
          required: true,
          message: '请选择店铺类型',
          trigger: 'change'
        }],
        transferOrNot: [{
          required: true,
          message: '请选择是否过户',
          trigger: 'change'
        }],
        priceDifference: [{
          required: true,
          message: '是否有差价不能为空',
          trigger: 'change'
        }],
        discountAmount: [{
          required: true,
          message: '请输入优惠金额',
          trigger: 'blur'
        }],*/
      },
      shopPictureAction: process.env.VUE_APP_BASE_API + '/onlineShop/shopPicture/uploadShopPictures',
      shopPictureFileList: [],
      establishmentTimeOptions: getYearsArray(),
      /*
      shopTypeOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],*/
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    shopPictureChange(data){
      this.formData.shopPicture = data;
      console.log(this.formData.shopPicture)
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        console.log(this.formData)
        addTrading(this.formData).then(res => {
          console.log(res);
          if(res.code == 200){
            this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 处理保存按钮可以继续操作
                this.resetForm();
                this.formData.shopPicture = [];
              }
            })
          }else{
            // 处理保存按钮可以继续操作
          }
        }).catch(res => {
          // 处理保存按钮可以继续操作
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    shopPictureBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
